@import "common.less";

:root {
    --global-min-width: 20rem;
}


html,
body,
main,
main > .panel,
.page-header,
.page-footer {
    min-width: var(--global-min-width);
}


html,
body {
    scroll-padding-top: 8rem;
    width: 100%;
    height: 100%;
}

body {
    --color-background-1: var(--color-theme);
    --color-background-2: var(--color-theme);
    --color-background-3: var(--color-theme);

    .border-box();
    margin: 0;
    padding: 0;

    .flex-column();
    min-width: var(--global-content-min-width);
    min-height: var(--global-content-min-height);

    transition: all 0.5s;
    background: var(--color-theme);
    @media (min-width: @sm) {
        background:
            url("/images/texture.png"),
            var(--color-theme);
    }
}



.page-header {
    z-index: 9999;
    #effect.glass();
    .flex-column();
    .flex-content-center();
    // min-height: 4rem;

    .border-box();
    padding: 0.5rem 5%;

    // box-shadow: 0px 1px 5px 1px #ccc
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

    @media (min-width: @sm) {
        margin-bottom: 1em;
    }
    @media (min-width: @md) {
        position: sticky;
        top: 0;
    }
}
.page-header .header-title,
.page-header-title,
.page-header.title {
    // #font.size-large-x();
    // min-width: 9em;

    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}


.page-footer {
    .border-box();
    padding: 1em;
    padding-bottom: 0.5em;

    .background-color-background();
    @media (min-width: @sm) {
        #effect.shadow-box();
    }
}
.page-footer hr {
    @media (min-width: @sm) {
        display: none;
    }
}



body > main,
body > .main {
    .flex-row();
    align-items: flex-start;

    width: 100%;
    max-width: @xl;
    margin: auto;

    @media (min-width: @sm) {
        .border-box();
        padding: 1rem;
    }
}


/* 文章内容块 */
.panel {
    .flex-column();
    width: 100vw;
    max-width: 100%;
    /* background-color: rgba(255, 255, 255, 0.95); */
    .background-color-background();

    @media (min-width: @sm) {
        .rounded();
        .border-box();
        #effect.shadow-box();
        width: 100%;
        padding: 1rem;
    }
}
.panel hr {
    width: 100%;
}



.panel-banner {
    .border-box();
    position: relative;
    display: block;
    width: 100%;
    height: 50vh;
    max-width: 100%;
    max-height: 25rem;
}
.panel-banner img {
    overflow: clip;
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 25rem;
    transition: opacity 0.35s;
}

.panel-article {
    cursor: default;
    .border-box();
}
.panel-article a {
    text-decoration: none;
}
.panel-article a:hover {
    cursor: default;
}
.panel-article img {
    object-fit: fill;
    width: 100%;
    height: 100%;
}

/* 项 */
.panel-article .list-article > li {
    .border-box();
    padding: 0.75rem;

    .flex-row();
    align-items: stretch;
    min-height: 5rem;
    border-top: 0px solid var(--color-border-gray);
    border-bottom: 1px solid var(--color-border-gray);

    background-color: var(--color-theme);
    /* 动画 */
    transition:
        box-shadow 0.3s,
        transform 0.3s ease,
        border-top-width 0.25s;

    /* 大屏幕 */
    @media (min-width: @sm) {
        margin: 0;
    }
}
.panel-article .list-article > li:not(:first-child):hover {
    #effect.shadow-box();
    border-top-width: 1px;
    transform: translateY(-5%);
}
.panel-article .list-article > li:first-child:hover {
    #effect.shadow-box();
}
.panel-article .list-article > li:last-child {
    border-bottom: none;
}
.panel-article .list-article > li > a {
    .rounded();
    .flex-row();
    .flex-items-center();
    cursor: pointer;
    flex-grow: 1;
    flex-shrink: 0;
    height: 20vw;
    min-width: 8rem;
    max-width: 25%;
    min-height: 5rem;
    max-height: 10rem;
}
.panel-article .list-article > li img {
    .rounded();
    overflow: clip;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.panel-article .list-article .information {
    margin-left: 0.75rem;
    .flex-column();
    .flex-1();
}
.panel-article .list-article .information .title,
.panel-article .list-article .information .information-title {
    font-size: var(--font-size-large);
    margin-bottom: 0.5rem;
}
.panel-article .list-article .information .title *,
.panel-article .list-article .information .information-title * {
    font-size: inherit;
}
.panel-article .list-article .information .detail,
.panel-article .list-article .information .information-detail {
    display: none;
    font-size: var(--font-size-medium);
    color: var(--color-text-gray);

    text-overflow: ellipsis;
    overflow: hidden;
    line-clamp: 3;
    box-orient: vertical;
    @media (min-width: @md) {
        display: -webkit-box;
    }
}
.panel-article .list-article .information .meta {
    margin-top: auto;
    color: var(--color-text-gray);
}
.panel-article .list-article .information .meta li {
    padding: 0;
    #font.size-small();
}

.panel-article-button-more {
    .button();
    margin: auto;
    margin-top: 1rem;
    height: 3em;
}
.panel-article-button-more:hover {
    cursor: pointer;
}


.box-aside {
    display: none;
    margin-left: 1rem;
    position: sticky;
    top: 8rem;

    min-width: 15rem;
    max-width: 25%;

    .background-color-background();

    gap: 1em;
    @media (min-width: @lg) {
        /* 显示 */
        .flex-column();
    }
}
.box-aside * {
    max-width: 100%;
}
.box-aside-list {
    .flex-column();
    list-style-type: disc;
    list-style-position: inside;
    margin-top: 0.5em;
}
li > ul {
    margin-left: 0.75em;
}
li > ul > li::before {
    content: "| ";
}



.box-column-but-row {
    .flex-column();
    @media (min-width: @sm) {
        .flex-row();
    }
}

